[#ftl]
 
[@agileWidgetIcon "agile.html.Map({parameters:{}})" "Map"]
	<img src="" alt="Map"/>
[/@]
 
 [@declare "agile.html.Area"  "agile._Component"]
	category:"Area Component"	
	,widgetName:"Area"
	[#assign templateString][#compress]
		<div class='agileComponent agileArea'>	
			<table><tr><td></td></tr></table>
		</div>
	[/#compress][/#assign]
	,templateString:"${templateString?js_string}"
	,attributes:agile.delegate(agile._Component.prototype.attributes,{	
		coords:lang.mixin({},agile.TextMetadata,{
			label:"i18n_coords"
			,onValueChange:function(widget,name,value){					
				widget.metadata(this.metadataCategory+"."+name,value);				
			}
		})
		,shape:lang.mixin({},agile.ComboMetadata,{	   
			label:"i18n_shape"
			,options:{rectangle:"rectangle",circle:"circle",polygon:"polygon"}		   		
   			,onValueChange:function(widget,name,value){					
				widget.metadata(this.metadataCategory+"."+name,value);				
			}
		})
		,target:lang.mixin({},agile.ComboMetadata,{
			label:"i18n_target"
			,options:{blank:"_blank",parent:"_parent",self:"_self",top:"_top"/*TODO:framename*/}		   		
   			,onValueChange:function(widget,name,value){					
				widget.metadata(this.metadataCategory+"."+name,value);				
			}
		})
	})
 [/@]		
 [@declare "agile.html.Map"  "agile.html.Image" "agile._Container"]
	category:"Map Component"	
	,widgetName:"Map"
	[#assign templateString][#compress]
	<div class='agileComponent agileMap'>
 		//TODO:Not implemented yet
		<table data-dojo-attach-point="areaContainer" style="width:300;height:50">
			<tr><td>Shape</td><td>Coords</td><td>Href</td><td>Alt</td><td>+/-</td></tr>		
		</table>		
		<img data-dojo-attach-point="image" src="{src}" height="{height}" width="{width}" /> 		
 		<div data-dojo-attach-point="uploader" style="width:80;margin-top:2px;margin-bottom:0px" multiple="false" data-dojo-type="dojox.form.Uploader" label="Upload" uploadOnSelect="true" url="${webAppHost}${context}/${project}/command/upload.do"></div> 		
	</div>
	[/#compress][/#assign]
	,templateString:"${templateString?js_string}"	
	,templateMap:{		
		dojo:"<map {html-style} {html-parameters}>{innerWidets}<map>"
		,agile:"<div data-dojo-type='agile.html.Map' data-dojo-props='{parameters}'>{innerWidets}</div>\n"
	}	
	,attributes:agile.delegate(agile.html.Image.prototype.attributes,{	
		//		
	})
	,constructor:function(){
		this.metadata("usemap",this.metadata("id"));
	}
	,getContainerNode:function(){
		return this.domNode;
	}

[#--//TODO	
<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
<map name="planetmap" id="planetmap">
  <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
  <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
  <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
</map>
--]
[/@]
